<template>
  <div>
    <el-dialog :title="title" v-model="store.state.ArrAddOrEditDV" width="400px" center>
      <el-form :model="addForm" label-width="120px">
        <el-form-item label="电影名" size="mini">
          <el-select v-model="addForm.mid" placeholder="请选择电影" style="width: 270px">
            <el-option
              v-for="item in movieData"
              :key="item.mname"
              :label="item.mname"
              :value="item.mid"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属影厅" size="mini">
          <el-select v-model="addForm.cid" placeholder="请选择所属影厅" style="width: 270px">
            <el-option
              v-for="item in auditoriumData"
              :key="item.cname"
              :label="item.cname"
              :value="item.cid"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="放映时间" size="mini">
          <el-date-picker
            style="width: 270px"
            v-model="addForm.playTime"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="票价" size="mini">
          <el-input v-model="addForm.price" placeholder="票价" />
        </el-form-item>
      </el-form>
      <span>
        <el-button size="mini" @click="quitDialog('setArrAddOrEditDV')">取消</el-button>
        <el-button size="mini" @click="insertorEditArrangement()">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="删除排片" v-model="store.state.ArrDelDV" width="300px" center>
      <div align="center">删除不可恢复，是否确定删除？</div>
      <span>
        <el-button size="mini" @click="quitDialog('setArrDelDV')">取消</el-button>
        <el-button size="mini" @click="deleteArrangement">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, defineProps, defineEmits, onUpdated } from 'vue'
import { useStore } from 'vuex'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const store = useStore()

onMounted(() => {
  getMoviesData()
  getAuditoriumData()
})

onUpdated(() => {
  setEditMsg()
})

const props = defineProps({
  multipleSelection: [],
  editRow: ref(''),
  insertOrEdit: ref('')
})
const emit = defineEmits(['getArrangementData'])

const idx = ref('')

const title = ref('添加排片')

const movieData = ref([])
function getMoviesData() {
  axios
    .get('/api/movie//getAllMovie')
    .then((res) => {
      movieData.value = res.data
    })
    .catch(() => {
      ElMessage.warning('获取电影名信息失败！')
    })
}

const auditoriumData = ref([])
function getAuditoriumData() {
  axios
    .get('/api/cinema/getAllCinema')
    .then((res) => {
      auditoriumData.value = res.data
    })
    .catch(() => {
      ElMessage.warning('获取影厅名信息失败！')
    })
}

const addForm = reactive({
  pid: '',
  mid: '',
  cid: '',
  playTime: '',
  price: ''
})

// 在触发编辑页面的时候  父控件调用子控件的该函数 将被编辑信息的旧信息先赋值
function setEditMsg() {
  if (props.insertOrEdit === 1) {
    addForm.playTime = ''
    addForm.price = ''
    addForm.mid = ''
    addForm.cid = ''
    title.value = '添加排片'
  } else {
    addForm.playTime = props.editRow.playTime
    addForm.price = props.editRow.price
    addForm.mid = props.editRow.mid
    addForm.cid = props.editRow.cid
    title.value = '编辑排片'
  }
}

function insertorEditArrangement() {
  addForm.playTime = new Date(addForm.playTime)
  addForm.price = parseFloat(addForm.price)
  if (props.insertOrEdit === 1) {
    addForm.pid = null
    // 使用axios 传addForm 添加场次安排
    axios
      .post('/api/plan/addPlan', addForm)
      .then(() => {
        ElMessage.success('添加场次安排成功')
        emit('getArrangementData')
      })
      .catch(() => {
        ElMessage.warning('添加场次安排异常！')
      })
  } else {
    addForm.pid = props.editRow.pid
    // 使用axios 传addForm 修改场次安排
    axios
      .post('/api/plan/updatePlan', addForm)
      .then(() => {
        ElMessage.success('修改场次安排成功')
        emit('getArrangementData')
      })
      .catch(() => {
        ElMessage.warning('修改场次安排异常！')
      })
  }
  addForm.cid = ''
  addForm.pid = ''
  addForm.mid = ''
  addForm.playTime = ''
  addForm.price = ''
  store.commit('setArrAddOrEditDV', false)
}

function handleDelete(id) {
  idx.value = id
  store.commit('setArrDelDV', true)
}

function deleteRow() {
  axios
    .get('/api/plan/deletePlan' + '/' + idx.value)
    .then(() => {
      ElMessage.success('删除成功！')
    })
    .catch(() => {
      ElMessage.warning('该场次已有订单，删除失败！')
    })
}

function deleteArrangement() {
  for (const item of props.multipleSelection) {
    handleDelete(item.pid)
    deleteRow()
  }
  emit('getArrangementData')
  // 此处不能对props.multipleSelection进行修改 每次使用父组件传过来的就好
  store.commit('setArrDelDV', false)
}

function quitDialog(val) {
  store.commit(val, false)
}
</script>
